<ion-view hide-tabs="true" hide-nav-bar="true" view-title="待使用详情" style="background-color: #F1F1F1;" ng-controller="unusedDetailCtrl"
    ng-cloak>
    <ion-header-bar align-title="center" class="bar-default" style="background-color: #F8F8F8;">
        <div class="buttons">
            <button class="button" ng-click="backPrePage()"><span class="ion-ios-arrow-thin-left" style="font-size: 24px;"></span></button>
        </div>
        <h1 class="title">待使用详情</h1>
    </ion-header-bar>
    <ion-content>
        <div class="detailState padding">
            <div class="detailStateMes">
                <div><span class="ion-ios-checkmark-outline fs100 lightGreen"></span></div>
                <div class="detailed f12 " style="color: #666666;">
                    <ul class="">
                        <li class="f14 fw lightGreen"><span>已预约成功！待使用...</span></li>
                        <li>
                            <div class="fw">
                                <h4 class="lightGreen">开课时间: <span ng-hide="item.courseFlag">{{item.start *1000 |date:'MM-dd HH:mm'}}</span></h4>
                                    <span style="margin-left:4px; ">结束时间:{{item.end *1000 |date:'yyyy-MM-dd HH:mm'}}</span>
                            </div>
                        </li>
                        <li ng-show="item.courseFlag">
                            <div>
                                <span>第{{item.chargeNum}}节</span> / <span>{{item.courseName}}</span> / <span>{{item.classLength}}分钟</span>
                            </div>
                        </li>
                        <li>
                            <div>教练: <span ng-show="item.courseFlag">{{item.coachName}}</span><span ng-hide="item.courseFlag">{{item.coachName}}</span></div>
                        </li>
                        <li ng-show="item.courseFlag">
                            <div>购买套餐产品: <span>{{item.productName}}</span><span class="courseMonney ion-social-yen">{{item.totalPrice}}</span></div>
                        </li>
                        <li ng-hide="item.courseFlag">
                            <div>课程: <span>{{item.name}}</span></div>
                        </li>
                        <li>
                            <div>下单时间: <span class="">{{item.create_at}}</span></div>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="border-top:solid 1px #e5e5e5; margin-top: 10px;" class="clearfix f12" >
                <button class="button button-small cancelBtn fr" ng-click="cancelOrder(item.aboutId,item.limit)">取消预约</button>
            </div>
        </div>
        <ion-list>
            <ion-item class="clearfix" ng-hide="item.courseFlag" ng-click="leagueDetailClick(item.id,22)">
                <div class="fl" style="margin-right: 10px;">
                    <ul>
                        <img ng-src="{{item.pic}}" alt="" style="width:48px; height:48px;border-radius: 50%;">
                    </ul>
                </div>
                <div class="fl">
                    <ul>
                        <li><b>{{item.name}}</b><span class="f12" style="margin-left: 4px;">{{item.level}}</span></li>
                        <li style="margin-top:8px;">
                            <ul style="display: flex;">
                                <li class="">
                                    <img style="width: 16px;margin-top: 4px;" ng-src="{{item.scoreImg.one}}" alt="">
                                </li>
                                <li class="">
                                    <img style="width: 16px;margin-top: 4px;" ng-src="{{item.scoreImg.two}}" alt="">
                                </li>
                                <li class="">
                                    <img style="width: 16px;margin-top: 4px;" ng-src="{{item.scoreImg.three}}" alt="">
                                </li>
                                <li class="">
                                    <img style="width: 16px;margin-top: 4px;" ng-src="{{item.scoreImg.four}}" alt="">
                                </li>
                                <li class="">
                                    <img style="width: 16px;margin-top: 4px;" ng-src="{{item.scoreImg.five}}" alt="">
                                </li>
                                <li style="padding-top:3px;pading-left:5px;">      
                                      <small> {{item.score}}分</small>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <span class="fr ion-chevron-right grey" style="margin-top: 10px"></span>
                <div class="fr">
                    <ul style="text-align: center;margin-right: 10px;">
                        <li><img style="width: 30px;height: 30px;border-radius: 50%;" ng-src="{{item.coachPic}}" alt=""></li>
                        <small class="grey">{{item.coachName}}</small>
                    </ul>
                </div>
            </ion-item>
            <ion-item  ng-click="mapLeagueClick(item.id,22)" >
                    <div class="clearfix" >
                        <div class="fl ">
                            <img class="grey" style="width: 40px;" ng-src="img/u71.png" alt="">
                        </div>
                        <div class="fl f12 " style="margin-left: 6px;" >
                            <ul >
                                <li>{{item.venueName}}</li>
                                <li class="grey">{{item.venueAddress}}</li>
                            </ul>
                        </div>
                        <span class="fr ion-chevron-right grey" style="margin-top: 10px"></span>
                    </div>
            </ion-item>
            <ion-item ng-show="item.courseFlag" ng-click="privateDetailClick(item.orderId)">
                <div class="clearfix">
                    <div class="fl courseDetailImg">
                        <img style="width: 100%;" ng-src="{{item.pic}}" alt="">
                    </div>
                    <div class="fl f12 " style="margin-left: 6px;">
                        <div>
                            <div>
                                <h4>{{item.productName}}</h4>
                            </div>
                            <div>
                                <ul style="display: flex;">
                                    <li class="">
                                        <img style="width: 16px;margin-top: 4px;" ng-src="{{item.scoreImg.one}}" alt="">
                                    </li>
                                    <li class="">
                                        <img style="width: 16px;margin-top: 4px;" ng-src="{{item.scoreImg.two}}" alt="">
                                    </li>
                                    <li class="">
                                        <img style="width: 16px;margin-top: 4px;" ng-src="{{item.scoreImg.three}}" alt="">
                                    </li>
                                    <li class="">
                                        <img style="width: 16px;margin-top: 4px;" ng-src="{{item.scoreImg.four}}" alt="">
                                    </li>
                                    <li class="">
                                        <img style="width: 16px;margin-top: 4px;" ng-src="{{item.scoreImg.five}}" alt="">
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <span class="fr ion-chevron-right grey" style="margin-top: 10px"></span>
                    <div class="fr f12 lightYellow" style="text-align: right;margin-right: 20px;">
                        <div class="f20"><span class="ion-social-yen"><b>{{item.totalPrice}}</b></span></div>
                        <div>共<span>{{item.classCount}}</span>节/总价</div>
                    </div>
                </div>
            </ion-item>
            <ion-item ng-show="item.courseFlag">
                <ul class="pitchDetailLists f12">
                    <li class="pitchDetail clearfix" style="height: 100%;min-height: 50px;margin:0 auto;" ng-repeat="w in item.packageClass">
                        <div class="pitchNum"><span ng-if='w.status == 2' class="pitchNumMark"></span> <span ng-if="w.status == 1" style="color:#28a54c;height:30px;width:19px;" class="ion-checkmark-circled"></span> </div>
                        <div class="fl mTm10" style="margin-left: 20px;">
                            <span>第{{w.times}}节</span>
                            <span style="margin-left: 15px;">{{w.name}}</span>
                            <span style="margin-left: 15px;">时长{{w.course_length}}分钟</span>
                            <span class="ion-social-yen" style="margin-left: 15px;">{{w.sale_price}}</span>
                        </div>
                        <div class="fr mTm10 clearfix" ng-show="yetClass">
                            <div class="fr ">上课教练: <span class="">{{w.coachName}}</span></div>
                        </div>
                    </li>
                </ul>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>